<style scoped>
</style>
<template>
    <div class="layout" style="background: white;">
        <div class="layout-content">
            <Row>
                <Col span="5">
                <Menu active-name="1-2" width="auto" :open-names="['1']">
                    <Tree :data="treeData" @on-select-change="onSelectChange"></Tree>
                </Menu>
                </Col>
                <Col span="19">
                <div class="layout-content-main">
                    <Tabs type="card" v-model="value=name">
                        <TabPane label="新闻" v-if="tab0" name="tab0">
                            <div style="float:left;margin-right:20px">
                                <Button type="primary" shape="circle" @click="onAdd">添加数据</Button>
                                <Button type="primary" shape="circle" @click="deleteSelection">删除所选</Button>
                            </div>
                            <div style="width:300px;display:inline-block;">
                                <Input v-model="filter.keyWords">
                                <Button slot="append" type="primary" icon="ios-search" @click="searchData"></Button>
                                </Input>
                            </div>
                            <Table border :columns="columns7" :data="filter.data" @on-selection-change="onSelectionChange"></Table>
                            <Page :total="filter.total" size="small" show-total show-elevator show-sizer
                                  @on-change="onChange" @on-page-size-change="onPageSizeChange"></Page>
                        </TabPane>
                        <TabPane label="评论" v-if="tab1" name="tab1">
                            <router-view></router-view>
                        </TabPane>
                    </Tabs>

                    <Modal
                            v-model="modal"
                            title="数据操作"
                            width="800px"
                    >
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" style="margin-right:50px">
                            <FormItem label="新闻标题" prop="title">
                                <Input v-model="formValidate.title"  placeholder="请输入标题"></Input>
                            </FormItem>
                            <FormItem label="新闻内容"  prop="content">
                                <quill-editor ref="myTextEditor"
                                              v-model="formValidate.content"
                                >
                                </quill-editor>
                            </FormItem>
                            <FormItem label="地址"  prop="address">
                                <Select v-model="formValidate.address"  placeholder="请选择">
                                    <Option value="beijing">北京市</Option>
                                    <Option value="shanghai">上海市</Option>
                                    <Option value="shenzhen">深圳市</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="图片"  prop="pic">
                                <Button type="primary" @click="addPic">添加图片</Button>
                                <span><img :src="path" style="height:70px;margin-left:200px"></span>
                            </FormItem>

                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem>
                        </Form>
                    </Modal>

                    <Modal
                            v-model="modal2"
                            title="选择图片"
                            width="800px"
                    >
                        <appUpload></appUpload>
                    </Modal>
                </div>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
	import baseCate from '../base/cateBase'
	import base from '../base/base'
    import Upload from './upload.vue'
	import {mapGetters,mapActions} from 'vuex'
	export default {
		components:{
            appUpload:Upload
        },
		mixins: [baseCate,base],
		data(){
			return {
				path:"",
				module:'news',
				type: 1,
				tab0: true,
				tab1: false,
                name:"tab0",
				columns7: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '新闻标题',
						key: 'title',
					},
					{
						title: '新闻内容',
						key: 'content'
					},
					{
						title: '地址',
						key: 'address'
					},
					{
						title: '评论数',
						key: 'commentCount'
					},
					{
						title: '操作',
						key: 'action',
						width: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.row)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.remove(params.row._id)
										}
									}
								}, '删除'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.tab1=true;
											this.$router.push('/news/comment/'+params.row._id);
											this.name="tab1"
										}
									}
								}, '评论'),
							]);
						}
					}
				],
			}
		},
        computed:{
            ...mapGetters(['modal2','picRowData'])
        },
        methods:{
            ...mapActions(['checkmodal2','checkpicRowData']),
			addPic(){
//				console.log(this.modal2);
				this.checkmodal2(false);
				this.checkmodal2(true);
            }
        },
        watch:{
			picRowData:function (val) {
				console.log(val);
				this.formValidate.pic = val;
				this.path="http://localhost:3000/"+this.formValidate.pic.filename
			}
        }
	}
</script>